<script lang="ts" setup>
import { shallowRef, defineEmits } from "vue"

const Emit = defineEmits<{
  (e: "addTodoEvent", todoName: string): void
}>()

const inputRef = shallowRef<HTMLInputElement>()

const addTodo = () => {
  if (inputRef.value!.value.trim() === "") return
  Emit("addTodoEvent", inputRef.value!.value)
  inputRef.value!.value = ""
}
</script>

<template>
  <header>
    <input type="text" ref="inputRef" />
    <button @click="addTodo">添加</button>
  </header>
</template>

<style scoped>
button {
  margin-left: 20px;
}
</style>
